<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站轮播图样式集合</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #4F46E5;
      --secondary: #10B981;
      --danger: #EF4444;
      --light: #F9FAFB;
      --dark: #1F2937;
      --border-light: #E5E7EB;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f0f2f5;
      color: var(--dark);
      padding: 20px;
      min-height: 100vh;
    }
    
    .container {
      max-width: 400px;
      margin: 0 auto;
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow);
      padding-bottom: 20px;
    }
    
    .page-header {
      padding: 16px;
      border-bottom: 1px solid var(--border-light);
    }
    
    .page-title {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
    }
    
    .page-description {
      font-size: 14px;
      color: #6B7280;
      margin-top: 4px;
    }
    
    /* 轮播图容器基础样式 */
    .carousel-container {
      display: none;
      padding: 16px;
    }
    
    .carousel-container.active {
      display: block;
    }
    
    .carousel-wrapper {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 16px;
    }
    
    /* 轮播指示器样式调整 */
    .carousel-indicators {
      bottom: 12px;
      gap: 6px;
    }
    
    .carousel-indicators [data-bs-target] {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.6);
      border: none;
      opacity: 1;
    }
    
    .carousel-indicators .active {
      background-color: white;
      width: 24px;
      border-radius: 4px;
    }
    
    /* 轮播控制按钮 */
    .carousel-control-prev,
    .carousel-control-next {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.3);
      top: 50%;
      transform: translateY(-50%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .carousel-wrapper:hover .carousel-control-prev,
    .carousel-wrapper:hover .carousel-control-next {
      opacity: 1;
    }
    
    .carousel-control-prev {
      left: 12px;
    }
    
    .carousel-control-next {
      right: 12px;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      width: 16px;
      height: 16px;
    }
    
    /* 轮播图说明 */
    .carousel-desc {
      font-size: 14px;
      color: #6B7280;
      padding: 0 16px;
    }
    
    /* 样式1: 基础图片轮播 */
    .carousel-style-1 .carousel-item img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    
    /* 样式2: 带文字叠加轮播 */
    .carousel-style-2 .carousel-item {
      position: relative;
      height: 240px;
    }
    
    .carousel-style-2 .carousel-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .carousel-style-2 .carousel-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: left;
      padding: 24px 16px 16px;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
      color: white;
    }
    
    .carousel-style-2 .carousel-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    
    .carousel-style-2 .carousel-text {
      font-size: 14px;
      opacity: 0.9;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    /* 样式3: 卡片式轮播 */
    .carousel-style-3 .carousel-inner {
      padding: 16px 0;
    }
    
    .carousel-style-3 .carousel-item {
      width: 80%;
      margin: 0 auto;
      transition: transform 0.5s ease;
    }
    
    .carousel-style-3 .carousel-item img {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }
    
    .carousel-style-3 .carousel-item.active + .carousel-item {
      transform: translateX(15%);
    }
    
    .carousel-style-3 .carousel-item.prev {
      transform: translateX(-15%);
    }
    
    .carousel-style-3 .carousel-indicators {
      bottom: -8px;
    }
    
    /* 样式4: 横向滑动卡片组 */
    .carousel-style-4 .carousel-wrapper {
      overflow: visible;
    }
    
    .carousel-style-4 .carousel-inner {
      display: flex;
      padding: 8px 0;
    }
    
    .carousel-style-4 .carousel-item {
      min-width: 65%;
      margin-right: 16px;
      transition: transform 0.3s ease;
    }
    
    .carousel-style-4 .carousel-item img {
      width: 100%;
      border-radius: 12px;
      object-fit: cover;
      height: 160px;
    }
    
    .carousel-style-4 .card-info {
      padding: 12px;
    }
    
    .carousel-style-4 .card-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    
    .carousel-style-4 .card-meta {
      font-size: 12px;
      color: #6B7280;
      display: flex;
      justify-content: space-between;
    }
    
    .carousel-style-4 .carousel-indicators,
    .carousel-style-4 .carousel-control-prev,
    .carousel-style-4 .carousel-control-next {
      display: none;
    }
    
    /* 样式5: 全屏沉浸式轮播 */
    .carousel-style-5 {
      padding: 0;
    }
    
    .carousel-style-5 .carousel-wrapper {
      border-radius: 0;
      margin-bottom: 0;
    }
    
    .carousel-style-5 .carousel-item {
      height: 100vh;
    }
    
    .carousel-style-5 .carousel-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .carousel-style-5 .carousel-caption {
      bottom: 80px;
      color: white;
    }
    
    .carousel-style-5 .carousel-title {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 12px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .carousel-style-5 .carousel-cta {
      background-color: var(--primary);
      color: white;
      border: none;
      padding: 10px 24px;
      border-radius: 30px;
      font-weight: 500;
      margin-top: 12px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    
    .carousel-style-5 .carousel-cta:hover {
      background-color: #4338CA;
    }
    
    /* 样式6: 内容轮播 */
    .carousel-style-6 .carousel-item {
      min-height: 220px;
      padding: 24px;
      background-color: var(--light);
      border-radius: 16px;
    }
    
    .carousel-style-6 .user-info {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }
    
    .carousel-style-6 .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #E5E7EB;
      margin-right: 12px;
      overflow: hidden;
    }
    
    .carousel-style-6 .user-name {
      font-weight: 600;
      font-size: 16px;
    }
    
    .carousel-style-6 .user-role {
      font-size: 12px;
      color: #6B7280;
    }
    
    .carousel-style-6 .carousel-content {
      font-size: 15px;
      line-height: 1.6;
      color: var(--dark);
      margin-bottom: 16px;
    }
    
    .carousel-style-6 .post-stats {
      display: flex;
      gap: 16px;
      font-size: 13px;
      color: #6B7280;
    }
    
    .carousel-style-6 .stat {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid var(--border-light);
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .switcher-option:hover {
      background-color: #F3F4F6;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    .carousel-item {
      animation: fadeIn 0.5s ease;
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">轮播图样式</div>
    <div class="switcher-option active" data-style="1">基础图片轮播</div>
    <div class="switcher-option" data-style="2">带文字叠加轮播</div>
    <div class="switcher-option" data-style="3">卡片式轮播</div>
    <div class="switcher-option" data-style="4">横向滑动卡片组</div>
    <div class="switcher-option" data-style="5">全屏沉浸式轮播</div>
    <div class="switcher-option" data-style="6">内容轮播</div>
  </div>
  
  <div class="container">
    <div class="page-header">
      <h1 class="page-title">精选内容</h1>
      <p class="page-description">发现社区中的热门内容和推荐</p>
    </div>
    
    <!-- 1. 基础图片轮播 -->
    <div class="carousel-container active carousel-style-1" id="carousel1">
      <div class="carousel-wrapper">
        <div id="basicCarousel" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#basicCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#basicCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#basicCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
          </div>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://picsum.photos/id/1039/800/400" class="d-block w-100" alt="风景图片1">
            </div>
            <div class="carousel-item">
              <img src="https://picsum.photos/id/1036/800/400" class="d-block w-100" alt="风景图片2">
            </div>
            <div class="carousel-item">
              <img src="https://picsum.photos/id/1037/800/400" class="d-block w-100" alt="风景图片3">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#basicCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#basicCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
      <div class="carousel-desc">
        基础图片轮播：简洁展示多张图片，适合首页banner、相册展示等场景，支持自动播放和手动切换。
      </div>
    </div>
    
    <!-- 2. 带文字叠加轮播 -->
    <div class="carousel-container carousel-style-2" id="carousel2">
      <div class="carousel-wrapper">
        <div id="textOverlayCarousel" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#textOverlayCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#textOverlayCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#textOverlayCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
          </div>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://picsum.photos/id/1043/800/500" class="d-block w-100" alt="活动图片1">
              <div class="carousel-caption">
                <div class="carousel-title">2023年度设计峰会</div>
                <div class="carousel-text">探索最新设计趋势，与行业专家面对面交流，共同探讨设计的未来发展方向。</div>
              </div>
            </div>
            <div class="carousel-item">
              <img src="https://picsum.photos/id/1048/800/500" class="d-block w-100" alt="活动图片2">
              <div class="carousel-caption">
                <div class="carousel-title">前端技术实战训练营</div>
                <div class="carousel-text">从基础到进阶，全面掌握现代前端开发技能，包含React、Vue等主流框架实战。</div>
              </div>
            </div>
            <div class="carousel-item">
              <img src="https://picsum.photos/id/1059/800/500" class="d-block w-100" alt="活动图片3">
              <div class="carousel-caption">
                <div class="carousel-title">产品经理成长之路</div>
                <div class="carousel-text">分享产品设计理念与实践经验，帮助产品新人快速成长为优秀产品经理。</div>
              </div>
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#textOverlayCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#textOverlayCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
      <div class="carousel-desc">
        带文字叠加轮播：图片上叠加标题和描述文字，通过渐变背景增强文字可读性，适合活动推广、新闻资讯等需要传达具体信息的场景。
      </div>
    </div>
    
    <!-- 3. 卡片式轮播 -->
    <div class="carousel-container carousel-style-3" id="carousel3">
      <div class="carousel-wrapper">
        <div id="cardCarousel" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#cardCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#cardCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#cardCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
          </div>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://picsum.photos/id/1068/600/400" class="d-block w-100" alt="卡片图片1">
            </div>
            <div class="carousel-item">
              <img src="https://picsum.photos/id/1060/600/400" class="d-block w-100" alt="卡片图片2">
            </div>
            <div class="carousel-item">
              <img src="https://picsum.photos/id/1062/600/400" class="d-block w-100" alt="卡片图片3">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#cardCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#cardCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
      <div class="carousel-desc">
        卡片式轮播：中心卡片突出显示，两侧部分显示相邻卡片，创造深度感和层次感，适合产品展示、精选内容推荐。
      </div>
    </div>
    
    <!-- 4. 横向滑动卡片组 -->
    <div class="carousel-container carousel-style-4" id="carousel4">
      <div class="carousel-wrapper">
        <div id="horizontalCarousel" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="card">
                <img src="https://picsum.photos/id/1076/600/400" class="d-block w-100" alt="推荐内容1">
                <div class="card-info">
                  <div class="card-title">城市建筑摄影技巧</div>
                  <div class="card-meta">
                    <span>摄影专区</span>
                    <span>2.5k 浏览</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="card">
                <img src="https://picsum.photos/id/1079/600/400" class="d-block w-100" alt="推荐内容2">
                <div class="card-info">
                  <div class="card-title">极简主义设计原则</div>
                  <div class="card-meta">
                    <span>设计学院</span>
                    <span>4.8k 浏览</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="card">
                <img src="https://picsum.photos/id/1080/600/400" class="d-block w-100" alt="推荐内容3">
                <div class="card-info">
                  <div class="card-title">周末徒步路线推荐</div>
                  <div class="card-meta">
                    <span>户外社区</span>
                    <span>3.2k 浏览</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="card">
                <img src="https://picsum.photos/id/1082/600/400" class="d-block w-100" alt="推荐内容4">
                <div class="card-info">
                  <div class="card-title">咖啡品鉴入门指南</div>
                  <div class="card-meta">
                    <span>美食部落</span>
                    <span>1.9k 浏览</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#horizontalCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#horizontalCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
      <div class="carousel-desc">
        横向滑动卡片组：卡片式布局支持横向滑动浏览，每张卡片包含完整信息，适合推荐内容、相关文章等需要展示多条内容的场景。
      </div>
    </div>
    
    <!-- 5. 全屏沉浸式轮播 -->
    <div class="carousel-container carousel-style-5" id="carousel5">
      <div class="carousel-wrapper">
        <div id="fullscreenCarousel" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#fullscreenCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#fullscreenCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#fullscreenCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
          </div>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://picsum.photos/id/1015/1000/1800" class="d-block w-100" alt="全屏图片1">
              <div class="carousel-caption">
                <div class="carousel-title">探索自然的美丽</div>
                <p>加入我们的户外摄影活动，捕捉大自然的壮丽景色</p>
                <button class="carousel-cta">立即报名</button>
              </div>
            </div>
            <div class="carousel-item">
              <img src="https://picsum.photos/id/1018/1000/1800" class="d-block w-100" alt="全屏图片2">
              <div class="carousel-caption">
                <div class="carousel-title">城市建筑之美</div>
                <p>发现城市中隐藏的建筑艺术，参加我们的城市徒步之旅</p>
                <button class="carousel-cta">了解详情</button>
              </div>
            </div>
            <div class="carousel-item">
              <img src="https://picsum.photos/id/1019/1000/1800" class="d-block w-100" alt="全屏图片3">
              <div class="carousel-caption">
                <div class="carousel-title">海洋生物摄影展</div>
                <p>欣赏来自全球摄影师的海洋生物精彩作品，感受海洋之美</p>
                <button class="carousel-cta">预约参观</button>
              </div>
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#fullscreenCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#fullscreenCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
      <div class="carousel-desc">
        全屏沉浸式轮播：占据整个屏幕空间，创造强烈的视觉冲击，适合重点推广内容、活动宣传等需要吸引用户注意力的场景。
      </div>
    </div>
    
    <!-- 6. 内容轮播 -->
    <div class="carousel-container carousel-style-6" id="carousel6">
      <div class="carousel-wrapper">
        <div id="contentCarousel" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#contentCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#contentCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#contentCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
          </div>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="user-info">
                <div class="avatar">
                  <img src="https://picsum.photos/id/1005/100" alt="用户头像" class="w-100 h-100 object-cover">
                </div>
                <div>
                  <div class="user-name">陈明亮</div>
                  <div class="user-role">产品设计师</div>
                </div>
              </div>
              <div class="carousel-content">
                我认为未来的产品设计将更加注重用户体验与情感连接，不仅仅是功能的实现，更要考虑产品与用户之间的情感共鸣。
              </div>
              <div class="post-stats">
                <div class="stat"><i class="fa fa-heart-o"></i> 128</div>
                <div class="stat"><i class="fa fa-comment-o"></i> 32</div>
                <div class="stat"><i class="fa fa-share-alt"></i> 15</div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="user-info">
                <div class="avatar">
                  <img src="https://picsum.photos/id/1012/100" alt="用户头像" class="w-100 h-100 object-cover">
                </div>
                <div>
                  <div class="user-name">林小雨</div>
                  <div class="user-role">前端开发</div>
                </div>
              </div>
              <div class="carousel-content">
                React 18的并发特性确实改变了前端开发的方式，让我们能够构建响应速度更快、用户体验更好的应用程序，值得深入学习。
              </div>
              <div class="post-stats">
                <div class="stat"><i class="fa fa-heart-o"></i> 96</div>
                <div class="stat"><i class="fa fa-comment-o"></i> 24</div>
                <div class="stat"><i class="fa fa-share-alt"></i> 8</div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="user-info">
                <div class="avatar">
                  <img src="https://picsum.photos/id/1025/100" alt="用户头像" class="w-100 h-100 object-cover">
                </div>
                <div>
                  <div class="user-name">王大锤</div>
                  <div class="user-role">UI设计师</div>
                </div>
              </div>
              <div class="carousel-content">
                深色模式设计不仅仅是颜色的反转，还需要考虑对比度、可读性和用户体验的平衡，这是一个值得深入研究的设计领域。
              </div>
              <div class="post-stats">
                <div class="stat"><i class="fa fa-heart-o"></i> 156</div>
                <div class="stat"><i class="fa fa-comment-o"></i> 42</div>
                <div class="stat"><i class="fa fa-share-alt"></i> 23</div>
              </div>
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#contentCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#contentCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
      <div class="carousel-desc">
        内容轮播：展示用户发表的文字内容，包含用户信息和互动数据，适合精选评论、用户观点展示等以文字为主的内容场景。
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前选中的轮播样式
    let currentCarouselStyle = '1';
    
    // 获取DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const carouselContainers = {
      '1': document.getElementById('carousel1'),
      '2': document.getElementById('carousel2'),
      '3': document.getElementById('carousel3'),
      '4': document.getElementById('carousel4'),
      '5': document.getElementById('carousel5'),
      '6': document.getElementById('carousel6')
    };
    
    // 所有轮播实例
    const carousels = {
      '1': new bootstrap.Carousel(document.getElementById('basicCarousel'), { interval: 5000 }),
      '2': new bootstrap.Carousel(document.getElementById('textOverlayCarousel'), { interval: 5000 }),
      '3': new bootstrap.Carousel(document.getElementById('cardCarousel'), { interval: 5000 }),
      '4': new bootstrap.Carousel(document.getElementById('horizontalCarousel'), { interval: 5000 }),
      '5': new bootstrap.Carousel(document.getElementById('fullscreenCarousel'), { interval: 5000 }),
      '6': new bootstrap.Carousel(document.getElementById('contentCarousel'), { interval: 5000 })
    };
    
    // 切换轮播样式
    function switchCarouselStyle(style) {
      // 暂停所有轮播
      Object.values(carousels).forEach(carousel => {
        carousel.pause();
      });
      
      // 隐藏所有轮播容器
      Object.values(carouselContainers).forEach(container => {
        container.classList.remove('active');
      });
      
      // 显示选中的轮播
      if (carouselContainers[style]) {
        carouselContainers[style].classList.add('active');
        currentCarouselStyle = style;
        
        // 重启当前轮播
        carousels[style].cycle();
      }
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (option.getAttribute('data-style') === style) {
          option.classList.add('active');
        }
      });
    }
    
    // 样式切换事件
    switcherOptions.forEach(option => {
      option.addEventListener('click', function() {
        const style = this.getAttribute('data-style');
        switchCarouselStyle(style);
      });
    });
    
    // 点击轮播卡片进入详情
    document.addEventListener('click', function(e) {
      const carouselItem = e.target.closest('.carousel-item:not(.active)');
      if (carouselItem) {
        // 阻止事件冒泡，避免触发轮播切换
        e.stopPropagation();
        return;
      }
      
      // 点击轮播内容进入详情
      const carouselContent = e.target.closest('.carousel-wrapper, .carousel-item.active');
      const controlBtn = e.target.closest('.carousel-control-prev, .carousel-control-next, .carousel-indicators button');
      
      if (carouselContent && !controlBtn) {
        const styleName = document.querySelector(`.switcher-option[data-style="${currentCarouselStyle}"]`).textContent;
        alert(`查看${styleName}中的内容详情`);
      }
    });
  </script>
</body>
</html>
